<template>
  <div
    v-loading="loading"
    class="page-container"
  >
    <div class="page-content">
      <div
        class="panel-container"
        :style="{ paddingBottom: editModel === 'add' ? '70px' : '290px' }"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="120px"
        >
          <div class="box">
            <div class="panel-title">客户基本信息</div>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="姓名:"
                  prop="LinkName"
                >
                  <el-input
                    v-model="form.LinkName"
                    placeholder="请输入姓名"
                    maxlength="20"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="手机号:"
                  prop="LinkPhone"
                >
                  <el-input
                    v-model="form.LinkPhone"
                    placeholder="请输入手机号"
                    maxlength="11"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="线索来源:"
                  prop="SourceIds"
                >
                  <el-cascader
                    v-model="form.SourceIds"
                    :options="sourceOptions"
                    :props="sourceProps"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="公司名称:"
                  prop="ComName"
                >
                  <el-input
                    v-model="form.ComName"
                    placeholder="请输入公司名称"
                    maxlength="100"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="公司性质:"
                  prop="comproperty"
                >
                  <el-radio-group v-model="form.comproperty">
                    <el-radio label="1">公司</el-radio>
                    <el-radio label="2">私营</el-radio>
                    <el-radio label="3">个人</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="所在区域:"
                  prop="ComArea"
                >
                  <el-cascader
                    v-model="form.ComArea"
                    :options="areaOptions"
                    :props="areaProps"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="详细地址:"
                  prop="ComAddress"
                >
                  <el-input
                    v-model="form.ComAddress"
                    placeholder="请输入详细地址"
                    maxlength="100"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="所属行业:"
                  prop="cateIds"
                >
                  <el-cascader
                    v-model="form.cateIds"
                    :options="cateOptions"
                    :props="cateProps"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="主营行业:"
                  prop="ComProject"
                >
                  <el-input
                    v-model="form.ComProject"
                    placeholder="请输入主营行业"
                    maxlength="100"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider />
          </div>
          <div class="box">
            <div class="panel-title">客户补充信息</div>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="是否有合伙人:"
                  label-width="160px"
                  prop="is_have_partner"
                >
                  <el-radio-group v-model="form.is_have_partner">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                  </el-radio-group>
                  <el-button
                    v-if="form.is_have_partner === 1"
                    type="primary"
                    plain
                    style="margin-left: 10px"
                    @click="showPartnerDialog"
                  >
                    添加合伙人
                  </el-button>
                  <!-- 合伙人表格 -->
                  <el-table
                    v-if="
                      form.is_have_partner === 1 && form.partnersList.length > 0
                    "
                    :data="form.partnersList"
                    :header-cell-style="{
                      background: '#F5F5F5',
                      color: '#000000'
                    }"
                    style="width: 100%; margin: 10px auto 20px"
                  >
                    <el-table-column
                      prop="partner_name"
                      label="合伙人姓名"
                      align="center"
                      header-align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="partner_phone"
                      label="电话号码"
                      align="center"
                      header-align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="partner_desc"
                      label="备注"
                      align="center"
                      header-align="center"
                    ></el-table-column>
                  </el-table>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="是否有常用联系人:"
                  label-width="160px"
                  prop="is_have_contact"
                >
                  <el-radio-group v-model="form.is_have_contact">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                  </el-radio-group>
                  <el-button
                    v-if="form.is_have_contact === 1"
                    type="primary"
                    plain
                    style="margin-left: 10px"
                    @click="showContactDialog"
                  >
                    添加常用联系人
                  </el-button>
                  <!-- 联系人表格 -->
                  <el-table
                    v-if="
                      form.is_have_contact === 1 &&
                      form.relationsList.length > 0
                    "
                    :data="form.relationsList"
                    :header-cell-style="{
                      background: '#F5F5F5',
                      color: '#000000'
                    }"
                    style="width: 100%; margin: 10px auto 20px"
                  >
                    <el-table-column
                      prop="LinkName"
                      label="联系人姓名"
                      align="center"
                      header-align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="LinkPhone"
                      label="电话号码"
                      align="center"
                      header-align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="relation"
                      label="与主号关系"
                      align="center"
                      header-align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="birthday"
                      label="生日"
                      align="center"
                      header-align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="LinkDesc"
                      label="备注"
                      align="center"
                      header-align="center"
                    ></el-table-column>
                  </el-table>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="是否合作过其他平台:"
                  label-width="160px"
                  prop="is_cooperation"
                >
                  <el-radio-group v-model="form.is_cooperation">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="友商合作情况:"
                  label-width="160px"
                  prop="cooper_desc"
                >
                  <el-input
                    v-model="form.cooper_desc"
                    placeholder="平台名称，会员等级，价格，合作年限等"
                    maxlength="100"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="性别:"
                  label-width="160px"
                  prop="sex"
                >
                  <el-radio-group v-model="form.sex">
                    <el-radio label="1"> 男</el-radio>
                    <el-radio label="2"> 女 </el-radio>
                    <el-radio label="0"> 未知 </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="客户性格:"
                  label-width="160px"
                  prop="khxg"
                >
                  <el-radio-group v-model="form.khxg">
                    <el-radio
                      v-for="item in khxgOptions"
                      :key="item.id"
                      :label="item.id"
                    >
                      {{ item.title }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="微信号:"
                  label-width="160px"
                  prop="wx"
                >
                  <el-input
                    v-model="form.wx"
                    placeholder="请输入微信号"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="生日:"
                  label-width="160px"
                  prop="birthday"
                >
                  <el-date-picker
                    v-model="form.birthday"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                    :style="{ width: '100%' }"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="年龄:"
                  prop="age_level"
                >
                  <el-select
                    v-model="form.age_level"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in ageOptions"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="是否参加拍卖:"
                  prop="is_join_sell"
                >
                  <el-radio-group v-model="form.is_join_sell">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="能否进行同行交易:"
                  label-width="160px"
                  prop="is_trading"
                >
                  <el-radio-group v-model="form.is_trading">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="网络意识:"
                  label-width="160px"
                  prop="internet_level"
                >
                  <el-radio-group v-model="form.internet_level">
                    <el-radio label="3"> 强</el-radio>
                    <el-radio label="2"> 中</el-radio>
                    <el-radio label="1"> 弱</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider />
          </div>
          <div class="box">
            <div class="panel-title">企业补充信息</div>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="公司类型:"
                  label-width="160px"
                  prop="ComType"
                >
                  <el-select
                    v-model="form.ComType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in companyTypeOptions"
                      :key="item.value"
                      :label="item.name || '无'"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="公司规模:"
                  label-width="160px"
                  prop="gm"
                >
                  <el-select
                    v-model="form.gm"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in companyGmOptions"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="客户从业经营年限:"
                  label-width="160px"
                  prop="jynx"
                >
                  <el-select
                    v-model="form.jynx"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in companyJynxOptions"
                      :key="item.value"
                      :label="item.name || '无'"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item
                  label="所在线下交易市场:"
                  label-width="160px"
                  prop="szsc_prov"
                >
                  <el-select
                    v-model="form.szsc_prov"
                    placeholder="请选择省"
                    clearable
                    @change="handleSzscCityChange"
                  >
                    <el-option
                      v-for="item in szscProvOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    v-model="form.szsc_name"
                    placeholder="请选择市场"
                    clearable
                    style="margin-left: 10px"
                  >
                    <el-option
                      v-for="item in szscNameOptions"
                      :key="item.label"
                      :label="item.label"
                      :value="item.label"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="交易能力:"
                  label-width="160px"
                  prop="trade_size"
                >
                  <el-select
                    v-model="form.trade_size"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in tradeSizeOptions"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item
                  label="业务需求:"
                  label-width="160px"
                  prop="business_requirement"
                >
                  <el-radio-group v-model="form.business_requirement">
                    <el-radio label="资产处置"> </el-radio>
                    <el-radio label="招标拍卖"> </el-radio>
                    <el-radio label="行情报价"> </el-radio>
                    <el-radio label="供应"> </el-radio>
                    <el-radio label="求购"> </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="是否想要处置资产:"
                  label-width="160px"
                  prop="is_waste"
                >
                  <el-radio-group v-model="form.is_waste">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="是否有整厂拆除业务:"
                  label-width="160px"
                  prop="is_remove"
                >
                  <el-radio-group v-model="form.is_remove">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="是否有海外业务:"
                  label-width="160px"
                  prop="is_out_sea"
                >
                  <el-radio-group v-model="form.is_out_sea">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider />
          </div>
          <div class="box">
            <div class="panel-title">其他认证信息补充</div>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="资格证或资质:"
                  prop="zgzmc"
                >
                  <el-checkbox-group v-model="form.zgzmc">
                    <el-checkbox label="无（不需要特殊资格证）"> </el-checkbox>
                    <el-checkbox label="生产性废旧金属收购许可证">
                    </el-checkbox>
                    <el-checkbox label="废弃电器电子产品处理资格证书">
                    </el-checkbox>
                    <el-checkbox label="危险废物经营许可证"> </el-checkbox>
                    <el-checkbox label="爆破与拆除资质"> </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item
                  label="其他备注:"
                  prop="qtbz"
                >
                  <el-input
                    v-model="form.qtbz"
                    placeholder="请输入其他备注"
                    clearable
                    type="textarea"
                    :rows="3"
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div
            v-if="editModel === 'edit'"
            class="box"
          >
            <div class="panel-title">历史批注</div>
            <el-table
              ref="table"
              stripe
              :data="detail.history_list"
              :header-cell-style="{ background: '#F5F5F5', color: '#000000' }"
              style="width: 100%"
            >
              <el-table-column
                align="center"
                header-align="center"
                label="批注人"
                prop="user_name"
              />
              <el-table-column
                align="center"
                header-align="center"
                label="批注内容"
                prop="new_mark_desc"
              />
              <el-table-column
                align="center"
                header-align="center"
                label="推荐产品"
                prop="product_id"
              >
                <template slot-scope="scope">
                  {{ getListName(vipOptions, scope.row.product_id) || '无' }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                header-align="center"
                label="批注时间"
                prop="created_time"
              />
              <el-table-column
                align="center"
                header-align="center"
                label="预约时间"
                prop="booking_time"
              />
            </el-table>
          </div>
        </el-form>
      </div>
    </div>
    <div class="fixed-container">
      <div class="fixed-content">
        <!-- 添加 -->
        <div
          v-if="editModel === 'add'"
          class="panel-container"
        >
          <div class="panel-content">
            <div class="panel-line flex-center">
              <el-button
                size="mini"
                @click="handleClose"
              >
                取消
              </el-button>
              <el-button
                size="mini"
                type="primary"
                @click="handleSubmit(1)"
              >
                保存并放入跟踪池
              </el-button>
              <el-button
                size="mini"
                type="primary"
                @click="handleSubmit(2)"
              >
                保存并放入共享池
              </el-button>
            </div>
          </div>
        </div>
        <!-- 编辑 -->
        <div
          v-else
          class="panel-container"
        >
          <div
            v-if="showPanelMark"
            class="panel-content"
          >
            <el-button
              type="text"
              @click="showPanelMark = false"
            >
              点击收起<i class="el-icon-arrow-down" />
            </el-button>
            <el-form
              ref="formMark"
              :model="formMark"
              :rules="rulesMark"
              label-width="120px"
              style="margin-top: 10px"
            >
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    label="客户意向:"
                    prop="new_mark_level"
                  >
                    <!-- 单选框组 -->
                    <el-radio-group v-model="formMark.new_mark_level">
                      <el-radio label="A"> A类,客户确定可以成交</el-radio>
                      <el-radio label="B"> B类,客户考虑成交</el-radio>
                      <el-radio label="C"> C类,主动了解平台,评估价值</el-radio>
                      <el-radio label="D"> D类,愿意听介绍,有互动</el-radio>
                      <el-radio label="E">
                        E类,客户拒绝/对废旧网不了解
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="20">
                  <el-form-item
                    label="批注内容:"
                    prop="new_mark_desc"
                  >
                    <el-input
                      v-model="formMark.new_mark_desc"
                      placeholder="请输入批注内容"
                      maxlength="200"
                      clearable
                      type="textarea"
                      :rows="3"
                      :style="{ width: '100%' }"
                    ></el-input>
                    <div class="text-tip text-warning">
                      批注内容提示：报价、过往投资经历、对哪项服务感兴趣、异议问题、下一步计划（时间和目的）、性格描述（语速、态度、年龄）
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="快速批注:"
                    prop="quick_mark"
                  >
                    <el-select
                      v-model="formMark.quick_mark"
                      placeholder="请选择"
                      @change="
                        (val) => {
                          formMark.new_mark_desc = val
                        }
                      "
                    >
                      <el-option
                        v-for="item in markOptions"
                        :key="item"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="推荐产品:"
                    prop="product_id"
                  >
                    <el-select
                      v-model="formMark.product_id"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in vipOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="预约时间:"
                    prop="booking_time"
                  >
                    <el-date-picker
                      v-model="formMark.booking_time"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="选择日期"
                      :style="{ width: '100%' }"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="panel-line flex-center">
                <el-button
                  type="primary"
                  @click="handleFollow"
                >
                  继续跟进
                </el-button>
                <el-button
                  type="warning"
                  @click="handleKickOut"
                >
                  暂时踢出
                </el-button>
                <el-button
                  type="danger"
                  @click="handleForeverOut"
                >
                  永久踢出
                </el-button>
              </div>
            </el-form>
          </div>
          <div
            v-else
            class="panel-content"
          >
            <el-button
              type="text"
              @click="showPanelMark = true"
            >
              点击展开<i class="el-icon-arrow-up" />
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!--  添加合伙人 -->
    <DialogPartner
      ref="DialogPartner"
      @success="handlePartnerSuccess"
    />
    <!-- 添加常用联系人 -->
    <DialogContact
      ref="DialogContact"
      @success="handleContactSuccess"
    />
  </div>
</template>
<script>
import { isMobile } from '@/utils/validate'
import {
  apiSelectMarket,
  apiCustomerAdd,
  apiCustomerDetail,
  apiCustomerEdit,
  apiCustomerFollow,
  apiCustomerForeverOut,
  apiCustomerKickOut,
  apiGetCityByPhone
} from '@/api/clue'
import { getListName } from '@/utils'
import DialogPartner from './components/DialogPartner.vue'
import DialogContact from './components/DialogContact.vue'

export default {
  name: 'CluePublish',
  components: {
    DialogPartner,
    DialogContact
  },
  props: [],
  data() {
    var validaMobile = (rule, value, callback) => {
      if (value && !isMobile(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    return {
      editModel: 'add',
      queryKhid: '', // 客户id
      detail: {}, // 客户详情
      loading: false,
      form: {
        LinkName: '', // 联系人姓名
        LinkPhone: '', //	联系人电话
        SourceIds: '', //	客户来源id,最后一级
        ComName: '', //	企业名称
        comproperty: '', //	公司性质-0空1公司2个体3个人
        ComArea: '', //	公司-省市区
        ComAddress: '', // 公司地址
        ComProject: '', //	主体经营项目
        cateIds: '', //	选中的行业分类ids  cate_ids 分类多选，传选中末级的编码，多个用逗号隔开
        is_have_partner: '', //	是否为合伙人-0空1是2否
        is_have_contact: '', //	是否有联系人-0空1是2否
        is_join_sell: '', // 是否参加拍卖-0空1是2否
        is_cooperation: '', // 是否合作过其他平台-0空1是2否
        cooper_desc: '', // 友商合作情况
        sex: '', // 性别-0空1男2女
        khxg: '', // 客户性格-未知,老鹰,孔雀,鸽子,猫头鹰
        wx: '', //	微信号
        birthday: '', //	生日
        age_level: '', // 年龄段-15-20岁/21-30岁/31-40岁/41-50岁/51-60岁/60岁以上
        is_trading: '', // 是否同行交易-0空1是2否
        internet_level: '', // 网络意识-0空1弱2中3强
        ComType: '', // 公司类型-0空1回收公司2调剂商3加工厂4其他
        gm: '', // 规模
        szsc_prov: '', // 所在市场省
        szsc_name: '', // 所在市场-名称
        jynx: '', //	经营年限- -1：空值 0：刚开始 1：1年 2：2年 3：3-5年 4：5-10年:5：10-20年:6：20年以上
        business_requirement: '', //	业务需求-单选：资产处置,招标拍卖,行情报价,供应,求购
        trade_size: '', //	交易能力-0空1：5000以下 2：5000-1万 3：1万-5万 4：5万-10万 5：10-50万:6：50万以上
        is_remove: '', //	是否拆除-0空1是2否
        is_out_sea: '', // 是否海外-0空1是2否
        is_waste: '', // 是否处置资产-0空1是2否
        zgzmc: [], // 资格证
        qtbz: '', // 其他备注
        partnersList: [], // 合伙人列表
        relationsList: [] // 联系人列表
      },
      submitForm: {
        LinkName: '', // 联系人姓名
        LinkPhone: '', //	联系人电话
        Source: '', //	客户来源
        source_name: '', //	来源名称=格式：系统1-采集2
        ComName: '', //	企业名称
        comproperty: '', //	公司性质-0空1公司2个体3个人
        ComProv: '', //	公司-省
        ComCity: '', //	公司-市
        ComZone: '', // 公司-区县
        ComAddress: '', // 公司地址
        ComProject: '', //	主体经营项目
        cate_ids: '', //	选中的行业分类ids
        is_have_partner: '', //	是否为合伙人-0空1是2否
        is_have_contact: '', //	是否有联系人-0空1是2否
        is_join_sell: '', //	是否参加拍卖-0空1是2否
        is_cooperation: '', //	是否合作过其他平台-0空1是2否
        cooper_desc: '', // 友商合作情况
        sex: '', // 性别-0空1男2女
        khxg: '', // 客户性格-未知,老鹰,孔雀,鸽子,猫头鹰
        wx: '', //	微信号
        birthday: '', //	生日
        age_level: '', // 年龄段-15-20岁/21-30岁/31-40岁/41-50岁/51-60岁/60岁以上
        is_trading: '', // 是否同行交易-0空1是2否
        internet_level: '', // 是否同行交易-0空1弱2中3强
        ComType: '', // 公司类型-0空1回收公司2调剂商3加工厂4其他
        gm: '', // 规模
        szsc_prov: '', // 所在市场省
        szsc_name: '', // 所在市场-名称
        jynx: '', //	经营年限- -1：空值 0：刚开始 1：1年 2：2年 3：3-5年 4：5-10年:5：10-20年:6：20年以上
        business_requirement: '', //	业务需求-单选：资产处置,招标拍卖,行情报价,供应,求购
        trade_size: '', //	交易能力-0空1：5000以下 2：5000-1万 3：1万-5万 4：5万-10万 5：10-50万:6：50万以上
        is_remove: '', //	是否拆除-0空1是2否
        is_out_sea: '', // 是否海外-0空1是2否
        is_waste: '', // 是否处置资产-0空1是2否
        zgzmc: [], // 资格证
        qtbz: '', // 其他备注
        action: '', // 动作定义：1自己跟踪2存入公海
        partners: '', //	合伙人的json信息
        relations: '' //	联系人的json信息
      },

      rules: {
        LinkName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        LinkPhone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: validaMobile, trigger: 'blur' }
        ],
        SourceIds: [
          { required: true, message: '请选择线索来源', trigger: 'blur' }
        ],
        ComName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        ComArea: [
          { required: true, message: '请选择所在区域', trigger: 'blur' }
        ],
        ComProject: [
          { required: true, message: '请输入主营行业', trigger: 'blur' }
        ],
        cateIds: [
          { required: true, message: '请选咋所属行业', trigger: 'blur' }
        ]
      },
      sourceOptions: [],
      sourceProps: {
        value: 'id',
        label: 'title',
        checkStrictly: true
      },
      areaOptions: [],
      areaProps: {
        value: 'code',
        label: 'name',
        checkStrictly: true
      },
      cateOptions: [],
      cateProps: {
        value: 'num_id',
        label: 'name',
        checkStrictly: true,
        multiple: true
      },
      ageOptions: [],
      khxgOptions: [],
      companyTypeOptions: [],
      companyGmOptions: [],
      szscProvOptions: [],
      szscNameOptions: [],
      tradeSizeOptions: [],
      companyJynxOptions: [],
      // 批注
      formMark: {
        khid: '', //	客户id
        new_mark_level: '', //	批注等级
        new_mark_desc: '', //	备注
        booking_time: '', //	预约时间
        product_id: '', //	产品id
        quick_mark: '' //	快速批注
      },
      rulesMark: {
        new_mark_level: [
          { required: true, message: '请选择客户意向', trigger: 'blur' }
        ],
        new_mark_desc: [
          { required: true, message: '请输入批注内容', trigger: 'blur' }
        ]
      },
      markOptions: [
        '您好,你拨的用户已关机',
        '电话号码是空号，放弃联系',
        '您拨打的电话已停机',
        '一说Feijiu网就挂机了',
        '电话未接通'
      ],
      vipOptions: [],
      showPanelMark: true,
      last: ''
    }
  },
  watch: {
    // 监听手机号变化
    'form.LinkPhone': {
      handler(newVal) {
        if (newVal && isMobile(newVal)) {
          this.getCityByPhone(newVal)
        }
      },
      immediate: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      this.getSelectList()
      if (this.$route.query.khid) {
        this.queryKhid = this.$route.query.khid
        this.editModel = 'edit'
        this.getDetail()
      }
    },
    // 获取下拉
    getSelectList() {
      this.$store.dispatch('select/getClueSource').then((res) => {
        this.sourceOptions = res.source
        this.ageOptions = res.age_level
        this.khxgOptions = res.khxg
        this.companyTypeOptions = res.com_type
        this.companyGmOptions = res.gm
        this.tradeSizeOptions = res.trade_size
        this.companyJynxOptions = res.jynx
      })
      this.$store.dispatch('select/getCityList').then((res) => {
        this.areaOptions = res
        this.szscProvOptions = res.map((item) => {
          return {
            label: item.name,
            value: item.code
          }
        })
      })
      this.$store.dispatch('select/getCateList').then((res) => {
        this.cateOptions = res
      })
      this.$store.dispatch('select/getVipList').then((res) => {
        this.vipOptions = res.map((item) => {
          return {
            label: item.p_name,
            value: item.p_id
          }
        })
      })
    },
    // 选择市场
    handleSzscCityChange(val) {
      this.form.szsc_name = ''
      this.szscNameOptions = []
      if (val) {
        apiSelectMarket({ sheng: val }).then((res) => {
          this.szscNameOptions = res.data.map((item) => {
            return {
              label: item.scname,
              value: item.proid
            }
          })
        })
      }
    },
    // 获取详情
    getDetail() {
      this.loading = true
      apiCustomerDetail({ khid: this.queryKhid })
        .then((res) => {
          this.loading = false
          this.setDetail(res.data)
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 设置详情数据
    setDetail(data) {
      this.detail = data
      for (const key in this.form) {
        if (this.detail[key] !== undefined) {
          this.form[key] = this.detail[key]
        }
      }
      // 线索来源
      if (this.detail.Source) {
        if (this.detail.Source.length === 4) {
          this.form.SourceIds = [this.detail.Source]
        } else {
          this.form.SourceIds = [
            this.detail.Source.slice(0, 4),
            this.detail.Source
          ]
        }
      }
      // 所在区域
      if (this.detail.ComProv) {
        this.form.ComArea = []
        this.form.ComArea.push(this.detail.ComProv)
      }
      if (this.detail.ComCity) {
        this.form.ComArea.push(this.detail.ComCity)
      }
      if (this.detail.ComZone) {
        this.form.ComArea.push(this.detail.ComZone)
      }
      // 行业分类
      if (this.detail.cate_ids) {
        this.form.cateIds = this.detail.cate_ids.split(',').map((item) => {
          if (item.length === 8) {
            return [item]
          } else {
            return [item.slice(0, 8), item]
          }
        })
      }
      if (this.detail.zgzmc) {
        this.form.zgzmc = this.detail.zgzmc.split(',') || []
      }
      // 合伙人列表
      if (this.detail.partners) {
        this.form.partnersList = JSON.parse(this.detail.partners) || []
      }
      // 联系人列表
      this.form.relationsList = this.detail.relation_list
    },
    // 格式化提交表单
    formatSubmitForm(type) {
      for (const key in this.submitForm) {
        if (this.form[key] !== undefined) {
          this.submitForm[key] = this.form[key]
        }
      }
      // 线索来源
      if (this.form.SourceIds) {
        this.submitForm.Source =
          this.form.SourceIds[this.form.SourceIds.length - 1]
        this.submitForm.source_name = this.getSourceName(this.sourceOptions, [
          ...this.form.SourceIds
        ])
      }
      // 所在区域
      if (this.form.ComArea) {
        this.submitForm.ComProv = this.form.ComArea[0] || ''
        this.submitForm.ComCity = this.form.ComArea[1] || ''
        this.submitForm.ComZone = this.form.ComArea[2] || ''
      }
      // 行业分类
      if (this.form.cateIds) {
        this.submitForm.cate_ids = this.form.cateIds
          .map((item) => {
            return item[item.length - 1]
          })
          .join(',')
      }
      // 动作定义：1自己跟踪2存入公海
      if (type) {
        this.submitForm.action = type
      }
      // 合伙人列表
      if (this.form.partnersList.length > 0) {
        this.submitForm.partners = JSON.stringify(this.form.partnersList)
      }
      // 联系人列表
      if (this.form.relationsList.length > 0) {
        this.submitForm.relations = JSON.stringify(this.form.relationsList)
      }
      if (this.editModel === 'edit') {
        this.submitForm.id = this.detail.id
      }
    },
    // 获取来源名称
    getSourceName(list, ids) {
      if (ids.length === 0) return ''
      let str = ''
      const id = ids.shift()
      const item = list.find((item) => {
        return item.id === id
      })
      str = item.title
      if (item.children && ids.length > 0) {
        str += '-' + this.getSourceName(item.children, ids)
      }
      return str
    },
    // 提交
    handleSubmit(type) {
      this.$refs['form'].validate((valid, message) => {
        if (!valid) {
          // 滚动到报错位置
          const name = Object.keys(message)[0]
          this.$message.error(message[name][0].message)
          this.$nextTick(() => {
            const el = document.querySelectorAll('.el-form-item__error')[0]
            el.scrollIntoView({ block: 'center', behavior: 'smooth' })
          })
          return
        }
        this.loading = true
        this.formatSubmitForm(type)
        console.log(this.submitForm)
        apiCustomerAdd(this.submitForm)
          .then((res) => {
            this.loading = false
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            setTimeout(() => {
              this.handleClose()
            }, 1000)
          })
          .catch(() => {
            this.loading = false
          })
      })
    },
    // 取消
    handleClose() {
      this.$bus.$emit('closeSelectedTag', this.$route)
    },
    // 删除
    handleDelete() {
      this.showDialogDelete = true
    },
    // 删除成功
    handleDeleteSuccess() {
      this.handleClose()
    },
    handleTrim(type) {
      this.form[type] = this.form[type].replace(/\s/g, '')
    },
    // 继续跟进
    handleFollow() {
      this.$refs['form'].validate((valid, message) => {
        if (!valid) {
          // 滚动到报错位置
          const name = Object.keys(message)[0]
          this.$message.error(message[name][0].message)
          this.$nextTick(() => {
            const el = document.querySelectorAll('.el-form-item__error')[0]
            el.scrollIntoView({ block: 'center', behavior: 'smooth' })
          })
          return
        }
        this.$refs['formMark'].validate((valid, message) => {
          if (valid) {
            this.loading = true
            this.formatSubmitForm()
            this.formMark.khid = this.detail.khid
            Promise.all([
              apiCustomerEdit(this.submitForm),
              apiCustomerFollow(this.formMark)
            ])
              .then((res) => {
                this.loading = false
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                setTimeout(() => {
                  this.handleClose()
                }, 1000)
              })
              .catch(() => {
                this.loading = false
              })
          }
        })
      })
    },
    // 暂时踢出
    handleKickOut() {
      this.$refs['form'].validate((valid, message) => {
        console.log(valid, message)
        if (!valid) {
          // 滚动到报错位置
          const name = Object.keys(message)[0]
          this.$message.error(message[name][0].message)
          this.$nextTick(() => {
            const el = document.querySelectorAll('.el-form-item__error')[0]
            el.scrollIntoView({ block: 'center', behavior: 'smooth' })
          })
          return
        }
        this.$refs['formMark'].validate((valid, message) => {
          if (valid) {
            this.loading = true
            this.formatSubmitForm()
            Promise.all([
              apiCustomerEdit(this.submitForm),
              apiCustomerKickOut({
                khid: this.detail.khid,
                new_mark_level: this.formMark.new_mark_level,
                reason: this.formMark.new_mark_desc
              })
            ])
              .then((res) => {
                this.loading = false
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                setTimeout(() => {
                  this.handleClose()
                }, 1000)
              })
              .catch(() => {
                this.loading = false
              })
          }
        })
      })
    },
    // 永久踢出
    handleForeverOut() {
      this.$refs['form'].validate((valid, message) => {
        if (!valid) {
          // 滚动到报错位置
          const name = Object.keys(message)[0]
          this.$message.error(message[name][0].message)
          this.$nextTick(() => {
            const el = document.querySelectorAll('.el-form-item__error')[0]
            el.scrollIntoView({ block: 'center', behavior: 'smooth' })
          })
          return
        }
        this.$refs['formMark'].validate((valid, message) => {
          if (valid) {
            this.loading = true
            this.formatSubmitForm()
            Promise.all([
              apiCustomerEdit(this.submitForm),
              apiCustomerForeverOut({
                khid: this.detail.khid,
                new_mark_level: this.formMark.new_mark_level,
                reason: this.formMark.new_mark_desc
              })
            ])
              .then((res) => {
                this.loading = false
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                setTimeout(() => {
                  this.handleClose()
                }, 1000)
              })
              .catch(() => {
                this.loading = false
              })
          }
        })
      })
    },
    // 获取列表名称
    getListName(list, id) {
      return getListName(list, id)
    },
    // 显示合伙人弹窗
    showPartnerDialog() {
      this.$refs.DialogPartner.showDialog()
    },
    // 添加成功
    handlePartnerSuccess(val) {
      this.form.partnersList.push(val)
    },
    // 显示联系人弹窗
    showContactDialog() {
      this.$refs.DialogContact.showDialog()
    },
    // 联系人添加成功
    handleContactSuccess(contact) {
      this.form.relationsList.push(contact)
    },
    // 通过手机号获取地区
    async getCityByPhone(phone) {
      try {
        const res = await apiGetCityByPhone({ phone })
        if (res.data) {
          // 假设返回数据包含省信息
          this.form.szsc_prov = res.data.prov_code
          this.handleSzscCityChange(res.data.prov_code)
        }
      } catch (error) {}
    }
  }
}
</script>
<style lang="scss" scoped>
.fixed-container {
  position: fixed;
  right: 0;
  bottom: 0;
  width: calc(100% - 140px);
  z-index: 100;
  padding: 0 10px;
  .panel-container {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    padding: 6px;
    margin: 0;
  }
}
.panel-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
